<template>
	<div>
		<el-header height="60px" class="header dflex_b" ref="headerRef">
			<div class="crpr" @click="foldChange">
				<i v-if="!fold" class="el-icon-s-fold"></i>
				<i v-else class="el-icon-s-unfold"></i>
			</div>
			<div class="dflex_vertical_c sele_none">
				<el-dropdown v-if="user && user._id" class="crpr margin_l_40 dropdown" @command="handleCommand"
					:show-timeout="100" :hide-timeout="100">
					<div class="dflex_vertical_c userImgName">
						<el-image class="headimg_mini"
							:src="user.avatar || 'https://7463-tcb-wjya2td7zzk5ex4-0cmt2c98cc4e-1308293149.tcb.qcloud.la/logo/默认头像 (2).png'"
							:preview-src-list="user.previewImgs" fit="cover"></el-image>
						<div class="margin_l_10 username">{{ user.username || $api.config().name }}</div>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item class="el-icon-edit-outline dflex" command="pwdChange">
							<div class="margin_l_5">修改密码</div>
						</el-dropdown-item>
						<el-dropdown-item class="el-icon-switch-button dflex" command="logOut">
							<div class="margin_l_5">安全退出</div>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</el-header>
		<el-drawer title="通知" size="500px" :visible.sync="informDrawer" direction="rtl" :append-to-body="true">
			<el-tooltip :open-delay="350" content="双击已读" placement="top" :hide-after="1000" :enterable="false"
				effect="light" v-for="(item, i) in informDatas" :key="i">
				<div v-if="!item.read" :ref="item.ref" class="inform crpr margin_lr_20 margin_b_20 padding_20 animated"
					:class="{ fadeOut: item.read == 1 }" @dblclick="read(i)">
					<div class="dflex_sb dflex_vertical_c">
						<div>{{ item.title + i }}</div>
						<div class="bbb">{{ item.time }}</div>
					</div>
					<div class="bbb margin_t_15">{{ item.content }}</div>
				</div>
			</el-tooltip>
		</el-drawer>
		<el-drawer title="修改密码" size="500px" :visible.sync="pwdDrawer" direction="rtl" :append-to-body="true"
			:wrapperClosable="false" @open="drawerOpen" @opened="drawerOpened">
			<el-form class="add_edit" :model="form" :rules="rules" ref="ruleForm" label-width="100px">
				<el-form-item label="原密码" prop="oldPassword" ref="oldPassword">
					<el-input v-model="form.oldPassword" placeholder="请输入原密码" show-password
						@keyup.enter.native="enter('old')"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="newPassword" ref="newPassword">
					<el-input v-model="form.newPassword" placeholder="请输入新密码" show-password
						@keyup.enter.native="enter('new')"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="passwordConfirmation" ref="passwordConfirmation">
					<el-input v-model="form.passwordConfirmation" placeholder="请输入新密码" show-password
						@keyup.enter.native="submitForm('ruleForm')"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button round icon="el-icon-check" class="confirm-btn" @click="submitForm('ruleForm')">提交
					</el-button>
					<el-button round icon="el-icon-back" class="return-btn" @click="pwdDrawer = false">返回</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
		<tab v-if="user && user._id"></tab>
	</div>
</template>

<script>
	import tab from '@/windows/components/tab.vue';
	import {
		version
	} from '@/package.json';
	export default {
		components: {
			tab
		},
		data() {
			const pass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.form.passwordConfirmation !== '') {
						this.$refs.ruleForm.validateField('passwordConfirmation');
					}
					callback();
				}
			};
			const checkPass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.newPassword) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			const validateLength = {
				min: 3,
				max: 20,
				message: '长度在 3 到 20 个字符',
				trigger: 'change'
			};
			return {
				adminVersion: version,
				fold: false,
				user: {},
				informDrawer: false,
				pwdDrawer: false,
				themeColorDrawer: false,
				form: {
					oldPassword: '',
					newPassword: '',
					passwordConfirmation: ''
				},
				rules: {
					oldPassword: [{
							required: true,
							message: '请输入原密码',
							trigger: 'change'
						},
						validateLength
					],
					newPassword: [{
						required: true,
						validator: pass,
						trigger: 'change'
					}, validateLength],
					passwordConfirmation: [{
						required: true,
						validator: checkPass,
						trigger: 'change'
					}, validateLength]
				},
				informDatas: []
			};
		},
		methods: {
			foldChange() {
				this.fold = !this.fold;

				if (this.fold) {
					if (document.getElementsByTagName('html')[0] && this.$refs.headerRef.$el) {
						document.getElementsByTagName('html')[0].style.cssText =
							'--status-bar-height:0px; --top-window-height:128px; --window-left:64px; --window-right:0px; --window-margin:0px; --window-top:calc(var(--top-window-height) + 0px); --window-bottom:0px;';
						this.$refs.headerRef.$el.style.left = 'var(--window-left)';
					}
				} else {
					if (document.getElementsByTagName('html')[0] && this.$refs.headerRef.$el) {
						document.getElementsByTagName('html')[0].style.cssText =
							'--status-bar-height:0px; --top-window-height:128px; --window-left:180px; --window-right:0px; --window-margin:0px; --window-top:calc(var(--top-window-height) + 0px); --window-bottom:0px;';
						this.$refs.headerRef.$el.style.left = 'var(--window-left)';
					}
				}

				uni.$emit('fold', this.fold);
			},
			enter(res) {
				if (res == 'old') {
					if (this.form.oldPassword) {
						this.$refs.newPassword.$el.querySelector('input').focus();
					}
				} else if (res == 'new') {
					if (this.form.newPassword) {
						this.$refs.passwordConfirmation.$el.querySelector('input').focus();
					}
				}
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid, obj) => {
					this.$api.set_unvalidated_form_focus(this, obj);
					if (valid) {
						this.$func.wmzadmin.call('user/updatePwd', this.form).then(res => {
							if (res.code == 200) {
								this.pwdDrawer = false;
								this.logOut();
								return;
							}
							this.$message.error(res.msg);
						});
					}
				});
			},
			toBi() {
				window.open('/#/pages/bi/wmzmall_bi', '_blank');
			},
			read(index) {
				this.informDatas[index].read = 1;
			},
			kf() {
				window.open('https://www.wmeizi.com', '_blank');
			},
			handleCommand(command) {
				if (command == 'logOut') {
					this.$confirm('此操作将退出后台系统, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.logOut();
					});
				} else if (command == 'pwdChange') {
					this.pwdDrawer = true;
				}
			},
			logOut() {
				let userUid = this.user._id;
				this.$func.wmzadmin.maincall('user/logout').then(res => {
					let arr = [];
					for (let key in localStorage) {
						if (
							key.indexOf('__cutSta') != -1 ||
							key.indexOf('wmzmall-tabs') != -1 ||
							key.indexOf('__paginationPage') != -1 ||
							key.indexOf('__paginationRows') != -1 ||
							key.indexOf('__orderCutSta') != -1 ||
							key.indexOf('__visitCutSta') != -1 ||
							key.indexOf('__browseCutSta') != -1 ||
							key.indexOf('__memberCutSta') != -1 ||
							key.indexOf('__refundCutSta') != -1
						) {
							arr.push({
								key: key,
								value: localStorage[key]
							});
						}
					}

					this.$func.wmzadmin.maincall('user/historyStorage', {
						storage_datas: arr,
						tab_cur_url: this.$route.fullPath,
						uid: userUid
					}).then(res => {
						if (res.code == 200) {
							for (let key in localStorage) {
								if (key.indexOf('__scroll') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__search') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__cutSta') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('wmzmall-tabs') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__tabs') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__paginationPage') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__paginationRows') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('hintTime') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__orderCutSta') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__visitCutSta') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__browseCutSta') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__memberCutSta') != -1) {
									uni.removeStorageSync(key);
								}
								if (key.indexOf('__refundCutSta') != -1) {
									uni.removeStorageSync(key);
								}
							}

							uni.$emit('loginOut');

							uni.removeStorageSync('wmzadmin_user');
							uni.removeStorageSync('uni_id_token');
							uni.removeStorageSync('uni_id_token_expired');
							uni.removeStorageSync('wmzadmin_user_space_id');
							uni.removeStorageSync('wmzadmin_user_shop_id');

							uni.redirectTo({
								url: '/pages/login'
							});

							this.$message({
								type: 'success',
								message: '退出成功!'
							});
						}
					});
				});
			},
			drawerOpen() {
				if (this.$refs.ruleForm) {
					this.$refs.ruleForm.resetFields();
				}
			},
			drawerOpened() {
				this.$refs.oldPassword.$el.querySelector('input').focus();
			},
			setUserMsg() {
				this.user = this.$api.getUserData();
				if (this.user.avatar) {
					this.user.previewImgs = [this.user.avatar];
					return;
				}

				this.user.previewImgs = ['https://mall-os-api.use-cloud.com/files/user/default.png'];
			}
		},
		created() {
			this.setUserMsg();

			uni.$on('setUserMsg', () => {
				this.setUserMsg();
			});
			uni.$on('loginIn', () => {
				this.setUserMsg();
			});
			uni.$on('anewLogIn', res => {
				this.handleCommand(res);
			});
		},
		mounted() {
			uni.$on('loginIn', () => {
				this.fold = true;
				this.foldChange();
			});
		}
	};
</script>

<style>
	>>>.el-drawer__body {
		overflow: overlay;
	}

	.el-dropdown-menu__item {
		font-size: 14px;
	}

	>>>.el-link.el-link--default,
	.username {
		color: #000;
	}

	>>>.el-link.el-link--default:hover {
		color: #ff6a6c;
	}

	>>>.el-link.is-underline:hover:after {
		border-bottom: 1px solid #ff6a6c;
	}

	.el-header {
		padding: 0 28px 0 16px;
	}

	.header {
		min-width: 520px;
		position: fixed;
		top: 0;
		left: 180px;
		right: 0;
		background-color: #fff;
		transition: all 0.35s;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.header .el-icon-s-fold,
	.header .el-icon-s-unfold {
		font-size: 16px;
	}

	.icontongzhi-hui {
		font-size: 20px;
	}

	.iconkefu-01 {
		font-size: 19px;
	}

	.userImgName::after {
		content: ' ';
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		position: absolute;
		top: 54%;
		transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		right: -12px;
		border-top: 6px solid #777;
	}

	.userImgName:hover::after {
		border-top: 0;
		border-bottom: 6px solid #777;
	}

	.inform {
		background-color: #f5f5f5;
		border-radius: 10px;
	}

	.add_edit .el-input {
		width: 90%;
	}

	.isHover:hover {
		color: #ff6a6c;
	}
</style>